@layout("/common/_container.html"){

<script src="${ctxPath}/static/echarts/echarts.min.js"></script>
 
 <div class="row" style="padding:10px 16px 10px 16px;">
	<div class="col-xs-12">
		<div class="alert alert-block alert-success">
			<button type="button" class="close" data-dismiss="alert">
				<i class="ace-icon fa fa-times"></i>
			</button>

			<i class="ace-icon fa fa-check green"></i>
			ECharts范例官网
			<strong class="green">
				<a class="green" href="http://echarts.baidu.com/examples.html" target="_blank">http://echarts.baidu.com/examples.html</a>
			</strong>
		</div>
	</div>
</div>	
 <div id="myChart"   class="col-sm-12"  style="height:400px;"></div>
 <div id="myChart1"  class="col-sm-12"  style="height:400px;"></div>
 <div id="myChart2"  class="col-sm-12"  style="height:400px;"></div>
 <div id="myChart3"  class="col-sm-12"  style="height:400px;"></div>
 <div id="myChart4"  class="col-sm-12"  style="height:400px;"></div>
 <div id="myChart5"  class="col-sm-12"  style="height:400px;"></div>
 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("myChart"));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
        
        

        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("myChart1"));

        option1 = {
        	    title : {
        	        text: '漏斗图',
        	        subtext: '纯属虚构',
        	        left: 'left',
        	        top: 'bottom'
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    toolbox: {
        	        show : true,
        	        orient: 'vertical',
        	        top: 'center',
        	        feature : {
        	            mark : {show: true},
        	            dataView : {show: true, readOnly: false},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 'left',
        	        data : ['展现','点击','访问','咨询','订单']
        	    },
        	    calculable : true,
        	    series : [
        	        {
        	            name:'漏斗图',
        	            type:'funnel',
        	            width: '40%',
        	            height: '45%',
        	            left: '5%',
        	            top: '50%',
        	            data:[
        	                {value:60, name:'访问'},
        	                {value:30, name:'咨询'},
        	                {value:10, name:'订单'},
        	                {value:80, name:'点击'},
        	                {value:100, name:'展现'}
        	            ]
        	        },
        	        {
        	            name:'金字塔',
        	            type:'funnel',
        	            width: '40%',
        	            height: '45%',
        	            left: '5%',
        	            top: '5%',
        	            sort : 'ascending',
        	            data:[
        	                {value:60, name:'访问'},
        	                {value:30, name:'咨询'},
        	                {value:10, name:'订单'},
        	                {value:80, name:'点击'},
        	                {value:100, name:'展现'}
        	            ]
        	        },
        	        {
        	            name:'漏斗图',
        	            type:'funnel',
        	            width: '40%',
        	            height: '45%',
        	            left: '55%',
        	            top: '5%',
        	            itemStyle: {
        	                normal: {
        	                    // color: 各异,
        	                    label: {
        	                        position: 'left'
        	                    }
        	                }
        	            },
        	            data:[
        	                {value:60, name:'访问'},
        	                {value:30, name:'咨询'},
        	                {value:10, name:'订单'},
        	                {value:80, name:'点击'},
        	                {value:100, name:'展现'}
        	            ]
        	        },
        	        {
        	            name:'金字塔',
        	            type:'funnel',
        	            width: '40%',
        	            height: '45%',
        	            left: '55%',
        	            top: '50%',
        	            sort : 'ascending',
        	            itemStyle: {
        	                normal: {
        	                    // color: 各异,
        	                    label: {
        	                        position: 'left'
        	                    }
        	                }
        	            },
        	            data:[
        	                {value:60, name:'访问'},
        	                {value:30, name:'咨询'},
        	                {value:10, name:'订单'},
        	                {value:80, name:'点击'},
        	                {value:100, name:'展现'}
        	            ]
        	        }
        	    ]
        	};



        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        
        
        

        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById("myChart2"));

        // 指定图表的配置项和数据
		option2 = {
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        data:['利润', '支出', '收入']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    yAxis : [
		        {
		            type : 'category',
		            axisTick : {show: false},
		            data : ['周一','周二','周三','周四','周五','周六','周日']
		        }
		    ],
		    series : [
		        {
		            name:'利润',
		            type:'bar',
		            itemStyle : {
		                normal: {
		                    label: {show: true, position: 'inside'}
		                }
		            },
		            data:[200, 170, 240, 244, 200, 220, 210]
		        },
		        {
		            name:'收入',
		            type:'bar',
		            stack: '总量',
		            itemStyle: {
		                normal: {
		                    label : {show: true}
		                }
		            },
		            data:[320, 302, 341, 374, 390, 450, 420]
		        },
		        {
		            name:'支出',
		            type:'bar',
		            stack: '总量',
		            itemStyle: {normal: {
		                label : {show: true, position: 'left'}
		            }},
		            data:[-120, -132, -101, -134, -190, -230, -210]
		        }
		    ]
		};


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
        
        
        

        // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById("myChart3"));

        // 指定图表的配置项和数据
		option3 = {
		    title: {
		        text: '深圳月最低生活费组成（单位:元）',
		        subtext: 'From ExcelHome',
		        sublink: 'http://e.weibo.com/1341556070/AjQH99che'
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        },
		        formatter: function (params) {
		            var tar = params[0];
		            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            splitLine: {show:false},
		            data : ['总费用','房租','水电费','交通费','伙食费','日用品数']
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		        {
		            name:'辅助',
		            type:'bar',
		            stack: '总量',
		            itemStyle:{
		                normal:{
		                    barBorderColor:'rgba(0,0,0,0)',
		                    color:'rgba(0,0,0,0)'
		                },
		                emphasis:{
		                    barBorderColor:'rgba(0,0,0,0)',
		                    color:'rgba(0,0,0,0)'
		                }
		            },
		            data:[0, 1700, 1400, 1200, 300, 0]
		        },
		        {
		            name:'生活费',
		            type:'bar',
		            stack: '总量',
		            itemStyle : { normal: {label : {show: true, position: 'inside'}}},
		            data:[2900, 1200, 300, 200, 900, 300]
		        }
		    ]
		};


        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);
        
        
        

        // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById("myChart4"));

        // 指定图表的配置项和数据
		option4 = {
		    backgroundColor: '#2c343c',
		
		    title: {
		        text: 'Customized Pie',
		        left: 'center',
		        top: 20,
		        textStyle: {
		            color: '#ccc'
		        }
		    },
		
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		
		    visualMap: {
		        show: false,
		        min: 80,
		        max: 600,
		        inRange: {
		            colorLightness: [0, 1]
		        }
		    },
		    series : [
		        {
		            name:'访问来源',
		            type:'pie',
		            radius : '55%',
		            center: ['50%', '50%'],
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:274, name:'联盟广告'},
		                {value:235, name:'视频广告'},
		                {value:400, name:'搜索引擎'}
		            ].sort(function (a, b) { return a.value - b.value}),
		            roseType: 'angle',
		            label: {
		                normal: {
		                    textStyle: {
		                        color: 'rgba(255, 255, 255, 0.3)'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    lineStyle: {
		                        color: 'rgba(255, 255, 255, 0.3)'
		                    },
		                    smooth: 0.2,
		                    length: 10,
		                    length2: 20
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: '#c23531',
		                    shadowBlur: 200,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4);
        
        
        // 基于准备好的dom，初始化echarts实例
        var myChart5 = echarts.init(document.getElementById("myChart5"));

        // 指定图表的配置项和数据
		option5 = {
		    title : {
		        text: '某站点用户访问来源',
		        subtext: '纯属虚构',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1548, name:'搜索引擎'}
		            ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};


        // 使用刚指定的配置项和数据显示图表。
        myChart5.setOption(option5);
 </script>
	
@}	